<!--
 * @Author: 码上talk|RC
 * @Date: 2020-06-09 23:20:26
 * @LastEditTime: 2020-10-21 16:59:06
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /tacomall-uniapp/pages/account/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
    <view class="page account">
        <cell-group title="基础资料">
            <cell title="头像" :is-link="true">
                <div class="a-avatar">
                    <image
                        src="https://s1.mi-img.com/mfsv2/avatar/fdsc3/p013qAccs3i9/WT2sfu9guuY496.jpg"
                    />
                </div>
            </cell>
            <cell title="账号" value="16607574271"></cell>
            <cell title="昵称" value="tacomall" :is-link="true"></cell>
        </cell-group>
        <cell-group title="保密资料">
            <cell title="手机号" value="16607574271" :is-link="true"></cell>
            <cell title="密码" :is-link="true"></cell>
        </cell-group>
        <view class="a-logout">
            <view class="l-btn" @click="doLogout">
                <text>退出登录</text>
            </view>
        </view>
        <van-dialog id="van-dialog" confirm-button-color="#b4946d" />
    </view>
</template>

<script>
import cell from '../../components/cell'
import cellGroup from '../../components/cell-group'
import Dialog from '../../wxcomponents/vant/dialog/dialog'
import { mapActions } from 'vuex'

export default {
    components: {
        cell,
        cellGroup
    },
    methods: {
        ...mapActions('user', ['logout']),
        doLogout() {
            Dialog.confirm({
                title: '退出登录',
                message: '确定退出当前账号？',
            })
                .then(() => {
                    this.logout().then(() => {
                        this.swi('/pages/index/index')
                    })
                    this.swi('/pages/index/index')
                })
                .catch(() => { })
        }
    }
}
</script>

<style lang="less" scoped>
.account {
    .a-avatar {
        display: inline-block;
        height: 104rpx;
        width: 104rpx;
        margin-right: 54rpx;
        image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
    .a-logout {
        display: flex;
        justify-content: center;
        margin-top: 20rpx;
        .l-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 710rpx;
            height: 80rpx;
            border-radius: 5rpx;
            background: white;
            font-size: 30rpx;
        }
    }
}
</style>
